
{{ define "admin/access/index.html" }}
{{ template "admin/common/page_header.html" .}}
<link rel="stylesheet" href="/static/ly/js/jquery-treegrid/jquery.treegrid.min.css">
<link rel="stylesheet" href="/static/ly/js/bootstrap-table/bootstrap-table.css">


<script type="text/javascript" src="/static/ly/js/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="/static/ly/js/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/ly/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>

<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <h6>权限列表</h6>
                </header>
                <div class="card-body">
                    <table class="table table-hover " id="treeTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var data = {{.accessList}}
        console.log(data)

    $(function () {
        var $table = $("#treeTable");
        $table.bootstrapTable({
            data:data,
            idField: 'Id',
            clickToSelect: true,
            singleSelect: true,//单选checkbox
            columns: [
                {field: 'check', checkbox: true },
                {title: '模块名称', field: 'ModuleName', width: 200, align: 'left', sortable: true},
                {title: '节点类型', field: 'Type', width: 200, align: 'center', sortable: true,formatter:function (value, row, index){
                        if(row.Type===1){
                            return `<span class="badge badge-secondary">模块</span>`
                        }
                        else if (row.Type===2){
                            return `<span class="badge badge-pill badge-success">菜单</span>`
                        }
                        else{
                            return `<span class="badge badge-pill badge-purple">按钮</span>`
                        }
                    }},
                {title: '操作名称', field: 'ActionName', width: 80, align: 'center', sortable: true},
                {title: "操作地址", field: "Url", width: 200, align: "left", sortable: true,formatter:function (value, row, index){
                        if(row.Url===""){
                            return `<span class="badge badge-secondary">无</span>`
                        }
                        return `<span class="badge badge-pill badge-primary">${row.Url}</span>`
                    }},
                {title: "排序", field: "Sort", width: 200, align: "left", sortable: true},
                {title: "描述", field: "Description", width: 200, align: "left", sortable: true},
                {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: 200,
                    // events: {
                    //     'click #edit': function (e, value, row, index) {
                    //         $('#id').val(row.Id);
                    //         console.log(row.Id)
                    //
                    //     },
                    //     'click #delete': function (e, value, row, index) {
                    //         deleteInfo(row.Id);
                    //     }
                    // },
                    //data-toggle="modal" data-target="#editModal" 触发事件
                    formatter: function (value, row, index) {
                        var doc = `<a id="edit" href="/admin/access/edit?id=${row.Id}" class="btn btn-info btn-sm" >编辑</a>
                            <a id="delete" href="/admin/access/delete?id=${row.Id}" class="btn btn-danger btn-sm" style="margin-left:10px;">删除</a>`;
                        return doc;
                    }
                }
            ],
            //在哪一列展开树形
            treeShowField: 'ModuleName',

            //指定父id列
            parentIdField: 'ModuleId',
            onResetView: function (data) {
                $table.treegrid({
                    // initialState: 'collapsed', // 所有节点都折叠
                    initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,  //设置点击树形位置
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        // $table.bootstrapTable('resetWidth');//这个方法找不到
                    }
                });
                //只展开树形的第一级节点
                //$table.treegrid('getRootNodes').treegrid('expand');
            },
        });
    });
</script>

{{end}}